<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  // 1 什么是跨域 URL由协议 域名 端口 和路径组成
//   由于浏览器同源策略 凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域
  
//     http://www.a.com/a.js
//     http://www.a.com/b.js   同一域名下    允许通信

//     http://www.a.com/lab/a.js
//     http://www.a.com/script/b.js    同一域名下不同文件夹    允许通信

//     http://www.a.com:8000/a.js
//     http://www.a.com/b.js   同一域名，不同端口    不允许

//     http://www.a.com/a.js
//     https://www.a.com/b.js    同一域名，不同协议    不允许

//     http://www.a.com/a.js
//     http://70.32.92.74/b.js   域名和域名对应ip    不允许

//     http://www.a.com/a.js
//     http://script.a.com/b.js    主域相同，子域不同    不允许

//     http://www.a.com/a.js
//     http://a.com/b.js   同一域名，不同二级域名    不允许

//     http://www.cnblogs.com/a.js
//     http://www.a.com/b.js   不同域名    不允许

// 2 JSONP
//   XmlHttpRequest对象受到同源策略的影响 而这种方式主要是通过动态插入一个script标签 浏览器对script的资源引用没有同源限制 同时资源加载到页面后会立即执行（没有阻塞的情况下）用jsonp获取的不是json数据 而是可以直接运行的javascript语句
  <!-- <script>
    var _scirpt = document.createElement('script')
    _scirpt.type = 'text/javascript'
    _scirpt.src = 'http://localhost:8888/jsonp?callback=f'
    document.head.appendChild(_scirpt)
  </script> -->
  缺点
    1 这种方式无法发送post请求 只能使用get请求 这是由于script标签自身的限制决定的
    2 另外要确定jsonp的请求是否失败并不容易 大多数框架的实现都是结合超时时间来判定 （不能很好的发现错误 并进行处理 与ajax对比 由于不是通过XmlHttpRequest进行传输 所以不能注册 success error等事件监听函数）

3 Proxy代理
  这种方式首先将请求发送给后台服务器 通过服务器来发送请求 然后将请求的结果传递给前端
  需要注意的是如果你代理的是https协议的请求 那么你的proxy首先需要信任该证书 尤其是自定义证书 或者忽略证书检查 否则你的请求无法成功 12306就提供了一个鲜活的例子

4 CORS
  这是现代浏览器支持跨域资源请求的一种方式
  当你使用XHLHttpRequest发送请求时 浏览器发现该请求不符合同源策略 会给该请求加一个请求头 Origin 后台进行一系列处理 如果确定接受请求则在返回结果中加入一个响应头 Access-Control-Allow-Origin 浏览器判断该响应头中是否包含Origin的值 如果有则浏览器会处理响应 我们就可以拿到响应数据 如果不包含浏览器直接驳回 这时我们无法拿到响应数据

5 XDR
  这是IE8 IE9提供的一种跨域解决方案 功能较弱只支持get和post请求 而且对于协议不同的跨域是无能为力的 比如在http协议下发送https请求

6 cookie
  cookie中的同源只关注域名 忽略协议和端口 所以 https://localhost:8080 和 http://localhost:8888 的cookie是共享的

7 flash/sliverlight

8 iframe
  iframe跨域的方式 功能强于jsonp 它不仅能用来跨域完成http请求 还能在前端跨域实现JavaScript调用 因此 完全不同跨域的跨域问题 通常用iframe的方式来解决
  iframe实现的跨域要求两个域必须都是基础域
  iframe跨域优点是功能强大 支持各种浏览器 几乎可以完成任何跨域想做的事情 缺点是实现复杂 要处理很多浏览器兼容问题 并且传输的数据不宜过大 过大了可能会超过浏览器对URL长度的限制 要考虑对数据进行分段传输等
</body>
</html>